<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-tickets"></i> 订单列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="table-extra">
                <el-date-picker
                v-model="dateRange"
                type="daterange"
                style="margin-right: 20px;"
                @change="handleDateRangeChange"
                value-format="yyyy-MM-dd"
                />
                <el-input
                class="search-box"
                @change="handleSearchQueryChange"
                :value="searchFiledValue"
                :clearable="true"
                @clear="handleClearSearchQuery"
                >
                    <el-select
                    slot="prepend"
                    v-model="searchFiled"
                    class="search-filed-selector"
                    @change="clearSearchQuery"
                    >
                        <el-option
                            v-for="item in searchFieldOptions"
                            :key="item.value"
                            :value="item.value"
                            :label="item.label"
                        />
                    </el-select>
                    <el-button slot="append" @click="handleSearch">搜索</el-button>
                </el-input>
            </div>
            <el-table
            v-loading="loading"
            :data="tableData"
            :default-sort="{prop: 'commitOrderTime', order: 'descending'}"
            size='small'
            @filter-change="handleOrderStatusFilterChange"
            >

                <!-- <el-row style="height:15px;"> -->
                <el-table-column type="index" :index="indexMethod" />
                <el-table-column prop="buyerOpenid" label="买家openid" width="180" />
                <el-table-column prop="buyerPhone" label="买家手机号" width="120" />
                <el-table-column prop="buyerName" label="买家昵称" />
                <el-table-column
                prop="orderStatus"
                label="订单状态"
                width="100"
                :filters="orderStatusFilter"
                :filter-multiple="false"
                column-key="orderStatus"
                >
                    <template slot-scope="scopeData">
                        {{scopeData.row.orderStatus | stateSwitchFliter}}
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="80">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="dragonAddr" label="地址" width="150">
                  <template slot-scope="scope">
                    <el-tag type="danger" v-if="scope.row.isDelivery == 0">自提</el-tag>
                    <el-tag type="danger" v-else-if="scope.row.isDelivery == 1">快递</el-tag>
                    <el-tag type="danger" v-else>送货上门</el-tag>
                    {{scope.row.dragonAddr?scope.row.dragonAddr:scope.row.addr}}
                  </template>
                </el-table-column>
                <el-table-column prop="commitOrderTime" label="下单时间" width="110" sortable>
                    <template slot-scope="scopeData">
                        <div>{{scopeData.row.commitOrderTime | fomatTime}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="payTime" label="付款时间" width="110 ">
                    <template slot-scope="scopeData">
                        <div>{{scopeData.row.payTime | fomatTime}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="sendTime" label="发货时间" width="110  ">
                    <template slot-scope="scopeData">
                        <div>{{scopeData.row.sendTime | fomatTime}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="comfirmTime" label="确认收货时间" width="110 ">
                    <template slot-scope="scopeData">
                        <div>{{scopeData.row.comfirmTime | fomatTime}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="orderMoney" label="订单金额(元)" width="110  ">
                    <template slot-scope="scopeData">
                        {{scopeData.row.orderMoney | getPrice}}
                    </template>
                </el-table-column>

                <el-table-column prop="sellerOpenid" label="卖家openid" width="140" />
                <el-table-column prop="sellerPhone" label="卖家手机号" width="120" />
                <el-table-column prop="sellerName" label="卖家昵称" />
                <el-table-column label="商品列表" prop='goodsList' width="80" type="expand">
                    <template slot-scope="scopeData">
                        <div v-for="(item,index) in  scopeData.row.goodsList" :key='index'>
                            <el-row class="goods-wrapper">
                                <el-col :span="2">
                                    <div class="grid-content ">
                                        <img :src="item.goodsImgs.split(',')[0]" alt="" style="width:20px;heigth:20px;">
                                    </div>
                                </el-col>
                                <el-col :span="4">
                                    <div class="grid-content ">
                                        <span>商品名字:</span>
                                        <span>{{item.goodsName}} </span>
                                    </div>
                                </el-col>
                                <el-col :span="4">
                                    <div class="grid-content ">
                                        <span>商品号:</span>
                                        <span>{{item.goodsNum ?item.goodsNum:'暂无' }}</span>
                                    </div>
                                </el-col>
                                <el-col :span="3">
                                    <div class="grid-content ">
                                        <span>价格(元):</span>
                                        <span>{{item.price | getPrice}}</span>
                                    </div>
                                </el-col>
                                <el-col :span="3">
                                    <div class="grid-content ">
                                        <span>数量:</span>
                                        <span>{{item.totalNumber}}</span>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </template>
                </el-table-column>
                <!-- </el-row> -->
            </el-table>

            <div class="pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="10"
                    layout="total, prev, pager, next" :total="totalNum" class="pagination-order">
                </el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <Dialog :edit-data="rowList" @upData="updata" @change="changeStatus">
            </Dialog>
        </el-dialog>

    </div>

</template>




<script>
import { api } from "@/api/api.js";
import Dialog from "@/components/page/orderList/dialog.vue";
import methods from "@/util/methods";
export default {
  data() {
    return {
      tableData: null,
      totalNum: 0,
      currentPage: 1,
      pageSize: 10,
      dialogFormVisible: false,
      formLabelWidth: "120px",
      currIndex: null,
      title: "编辑",
      rowList: {},
      loading: false,
      dateRange: [],

      searchBuyerNameQuery: "",
      searchSellerNameQuery: "",
      searchBuyerPhoneQuery: "",
      searchSellerPhoneQuery: "",
      searchFiled: "searchBuyerNameQuery",
      orderStatusFilter: [
        { text: "未付款", value: 0 },
        { text: "待发货", value: 1 },
        { text: "已发货", value: 2 },
        { text: "已完成", value: 3 },
        { text: "退款中", value: 4 },
        { text: "退款成功", value: 5 },
        { text: "已取消", value: 6 }
      ],
      orderStatus: undefined,
      searchFieldOptions: [
        {
          label: "买家昵称",
          value: "searchBuyerNameQuery"
        },
        {
          label: "卖家昵称",

          value: "searchSellerNameQuery"
        },
        {
          label: "买家手机",
          value: "searchBuyerPhoneQuery"
        },
        {
          label: "卖家手机",
          value: "searchSellerPhoneQuery"
        }
      ]
    };
  },
  components: {
    Dialog
  },
  methods: {
    indexMethod(index) {
      let i = (this.currentPage - 1) * 10 + index + 1;
      return i;
    },
    getOrderList() {
      this.loading = true;
      const {
        currentPage,
        searchFiled,
        searchFiledValue,
        orderStatus,
        dateRange
      } = this;
      const [startDate, endDate] = dateRange;
      const key = {
        searchBuyerNameQuery: "buyerName",
        searchSellerNameQuery: "sellerName",
        searchBuyerPhoneQuery: "buyerPhone",
        searchSellerPhoneQuery: "sellerPhone"
      }[searchFiled];
      this.http
        .post(api.adminOrderList, {
          page: this.currentPage,
          size: 10,
          [key]: searchFiledValue,
          status: orderStatus,
          startDate,
          endDate
        })
        .then(({ data }) => {
          let { data: tableData } = data;
          this.tableData = tableData;
          this.totalNum = data.total;
        })
        .finally(() => (this.loading = false));
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      console.log(`当前页: ${val}`);
      this.getOrderList();
    },
    signOut: methods.signOut,
    updata(msg) {
      const { orderNum, deliverSMS } = msg;
      let orderStatus = Number(msg.orderStatus);
      this.http
        .post(api.adminUpdateOrder, {
          orderStatus,
          orderNum,
          isSendMsg: Number(deliverSMS)
        })
        .then(res => {
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: "修改成功!",
              center: true
            });
          } else {
            this.$message({
              type: "error",
              message: res.data.msg,
              center: true
            });
          }
        });
      this.tableData[this.currIndex].orderStatus = orderStatus;
      // this.$set(this.tableData, this.currIndex, msg)
      this.dialogFormVisible = false;
    },
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      // row.orderStatus = methods.stateSwitchFliter(row.orderStatus)
      this.rowList = {
        ...row
      };
      // this.currIndex = index
      this.currIndex = this.tableData.indexOf(row);
      this.title = "编辑订单状态";
    },
    changeStatus(data) {
      this.dialogFormVisible = data;
    },
    handleSearchQueryChange(value) {
      const { searchFiled } = this;
      this[searchFiled] = value;
    },
    clearSearchQuery() {
      this.searchFieldOptions.forEach(option => {
        this[option.value] = "";
      });
    },
    handleClearSearchQuery() {
      this.currentPage = 1;
      this.clearSearchQuery();
      this.getOrderList();
    },
    handleSearch() {
      this.getOrderList();
    },
    handleOrderStatusFilterChange({ orderStatus: orderStatusFilter }) {
      this.orderStatus =
        orderStatusFilter && orderStatusFilter.length !== 0
          ? orderStatusFilter[0]
          : undefined;
      this.getOrderList();
    },
    handleDateRangeChange() {
      this.getOrderList();
    }
  },
  computed: {
    searchFiledValue() {
      return this[this.searchFiled];
    }
  },
  mounted() {
    this.getOrderList();
  }
};
</script>

<style lang="scss" scoped>
.dialog-footer-box {
  float: right;
  margin-top: -20px;
}

.is-active {
  color: #303133;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 200px;
}

.goods-wrapper {
  border: 1px solid black;
  vertical-align: middle;
  padding-left: 6px;
}

.box-1 {
  display: flex;
  justify-content: space-between;
}

.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.pagination-order {
  margin: auto;
}

.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.del-dialog-cnt {
  font-size: 16px;
  text-align: center;
}
.table-extra {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  .search-filed-selector {
    width: 120px;
  }
  .search-box {
    width: 600px;
  }
}
</style>
